<template>
<div>
  <div class="Detail-header">
    <i class="el-icon-arrow-left" @click="$global.back"></i>
    <div class="title">歌单</div>
    <i class="el-icon-search" @click="$global.goPage('/mainSearch')"></i>
  </div>
<div class="banner">
  <img :src="ListDetail.coverImgUrl" class="music-list-img">
  <div class="List_descrip">
    <div class="descrip_title">{{ListDetail.name}}</div>
    <div class="center" v-if="ListDetail.creator">
      <el-avatar :size="60" :src="ListDetail.creator.avatarUrl"></el-avatar>
      <span>{{ListDetail.creator.nickname}}</span>
    </div>
    <div class="bottom">
      <div v-if="ListDetail.tags">
        标签：<el-tag type="success" size="medium" effect="dark" v-for="(item,i) in ListDetail.tags" :key="i">{{item}}</el-tag>
      </div>
      <el-popover popper-class="pop"
        placement="bottom"
        width="500"
        trigger="click"
        :content="ListDetail.description">
        <p slot="reference">{{ListDetail.description}}</p>
      </el-popover>

    </div>
  </div>

</div>
  <div class="List-content">
    <div class="content-top"><h1><img class="music_icon" src="@/assets/music.svg">全部歌曲</h1>
    <div>
      <i class="el-icon-chat-line-square" @click="showCom"></i>
      <i :class="faved?'favLight':'fav'" @click="addListFav"></i>
    </div>
    </div>
    <songs-list :songsList="ListDetail.tracks"></songs-list>
  </div>
  <music-com-drawer :show="showDrawer" @showDrawer="showCom" :allComment="MusicListComment" ></music-com-drawer>
</div>
</template>

<script>
import {mapState} from 'vuex'
import MusicComDrawer from "./MusicComDrawer";
import SongsList from "./SongsList";
export default {
  name: "MusicListDetail",
  components: {SongsList, MusicComDrawer},
  data(){
    return{
      showDrawer:false,
    }
  },
  computed:{
    ...mapState({
ListDetail:state=>state.music.MusicListDetail,
          MusicListComment: state=>state.music.ListCom,
      faved:state=>state.music.faved
    })
  },
  beforeCreate() {
    this.$store.dispatch('music/MusicListById',this.$route.params.id)
    this.$store.dispatch('music/MusicListComById',this.$route.params.id)
    this.$store.dispatch('music/musFav',{musicid:this.$route.params.id,
      uid:window.localStorage.getItem('id'),
      type:1})

  },
  methods:{
    showCom(){
this.showDrawer=!this.showDrawer
    },
    addListFav(){
      this.$store.dispatch('music/musAddFav',{musicid:this.$route.params.id,
        uid:window.localStorage.getItem('id'),
        type:1})
    }
  }
}
</script>

<style lang="less">
.Detail-header{
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 60px;
  background: #eae7e7;
  opacity: 0.5;
  display: flex;
  justify-content: space-between;
  i{
    margin: 0 10px;
    font-size: 30px;
    line-height: 60px;
  }
  .title{
    line-height: 60px;
    font-size: 30px;
  }
}
.banner{
  background: #b2d2dc;
  height: 250px;
  padding:90px 40px 30px;
  display: flex;
  .List_descrip{
   margin: 20px 50px;
    .descrip_title{
      font-size: 30px;
    }
    .center{
      margin-top: 20px;
      display: flex;
      align-items: center;
      span{
        font-size: 20px;
        margin-left: 15px;
      }
    }
    .bottom{
      margin-top: 20px;
      .pop{
        background: #cccccc;
      }
      .el-tag{
        margin-right: 10px;
        margin-bottom: 10px;
      }
      p{
        font-size: 17px;
        color: #656262;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 500px;
      }
    }

  }
  .music-list-img{
    width: 200px;
    height: 200px;
    border-radius: 10px;
  }
}
.List-content{
  i{
    font-size: 30px;
    margin:0 10px;
  }
  .content-top{
    background: #eae7e7;
    display: flex;
    justify-content: space-between;
    padding:10px 20px;
    h1{
      font-size: 24px;
      display: flex;
    }
  }
  .el-card{
    //height: 40px;
  position: relative;
    .el-icon-video-play{
      font-size: 35px;
      position: absolute;
      right: 80px;
      top: 25px;
    }
    .el-icon-more{
      font-size: 35px;
      position: absolute;
      right: 25px;
      top: 25px;
    }
    .el-card__body{
      padding: 15px 55px;
    }
    .tracks_index{
      font-size: 30px;
      position: absolute;
      left: 15px;
      top:25px;
    }
    p{
      margin:10px 0 0;
      opacity: 0.5;
    }
  }
}

</style>
